@@@@@@@@@@@@@@@@@ TjzM@What's New 2002/10/18

@@@@@@@@@@@S҂̂߂̃z[y[W
@@@@@@@ @@@http://www.scollabo.com/banban/
@@@@@@@@@@@@@@@@23

@@@@@@@@@@@@@banban@scollabo.com



@̍u̓^OoăeLXgGfB^Ńz[y[WƂA
ǂ炩ƂƂIȍƂSɂȂ܂Be̐p̃I[T
O\tgƂ͈悵āAvʂ̃v݂̂go邱Ƃo܂B

@ɂ͐IœȌtoĂ܂AȂׂS҂ɂ₷
Ă܂BǂACyȋCłtBu
钆ŕȂ_܂AȂ[B

@ułHTML4.01𒆐SƂ@̂ƂȂĂ܂BȂÃ}K
W͓tHgłǂ݂ƉKɓǂ߂悤ɂȂ܂B

@T̉ۑ  AJ[ɂāEEJavaScript vs CSS



AJ[

@́AAJ[̕\ɂăX^CV[gg\ƁAXNvg
g\̈Ⴂɂďڂ܂B
@ȂAOXNvgƂɎg摜gp܂B̃t@ĆA
TCgɂċނƂĒ񋟂Ă܂̂ŁA萔ł_E[hē
肵ĂB

t@C̃_E[hiނ̒񋟁j
@{TCgɍ̍uŎgp JavaScript摜t@CȂǂꊇŃ_
E[hł悤ɂ܂B_E[ht@Cɂ͍gp摜
Ȃǂ܂܂Ă܂Bui߂ŁA񂠂Ȃ̃p\RɃt@C
_E[hĂĂB

@ȂAt@C͈kĂ܂A_uNbN邱Ƃɂ
𓀂܂Bkt@C͊evbgtH[ʂɗpӂ܂̂ŁA
Ȃ̊ɂt@CIтB
@et@C͔ɏeʂł̂ŁAbŃ_E[h\Ȃ̂Ƃ
Ă܂B

@pXiIuWFNgw肷 URLj̊֌W܂̂ŁAȂ
̍uŎgpĂtH_̂ȂɁAuimagesvƂ̃tH_
ĈړĂĂB
@łɂ̃tH_ꍇ́APɈړĂĂB

_E[hURL@http://www.scollabo.com/banban/daf/material.html



AJ[摜ƃXNvgőgݍ킹

@̕փNAJ[ɂẮA{XŏڂĂ
̂ŎQƂĂB

@摜păAJ[Lq@́ÃTCgłĂ
܂B̓XNvgƂ̑gݍ킹gāA[U}EX𑀍ɂ
ĉ摜ւ@`܂B

@摜ւCxgnhɁAonMousoverAonMousout܂B
Ⴆ΁ALHTMLł͉摜Ƀ}EXGꂽƂɈقȂ摜\
̂łB

   <img src="../images/nav_final_01.gif" 
   onMouseover="this.src='images/nav_final_01-02.gif'" 
   onMouseout="this.src='images/nav_final_01.gif'" 
   width="121" height="39" alt="Tv"> <!-- PsŋLq܂ -->

@̃CxgnhgA摜炩HTMLɓǂݍރXNv
gpăAJ[̉摜ɐGꂽƂɁA摜ω\܂B

X^CV[gɂAJ[̕\
@X^CV[gœľʂ\@p܂Bvf̑֊֌W
ŃX^Cω@p܂B

@ p a:link { background-color: #063; color: #fff; font-weight: 
              bold; font-size: 28px; text-decoration: none; 
              padding: 5px 30px }

@́Apvf݂̂ avfX^CtLq@ŁA avfɂ
eyڂ܂BAJ[͋[NXvfŁAKAKς݁A
AJ[Ƀ}EXGƂ̕\̂łB

@̓XNvgOɒu@̗p܂BKAނ肵Ă
B



HTML̍쐬

@HTML܂BeLXgGfB^iSimpleTextAȂǁjN
ĉLHTML^CvĂBȂ̒ł̂łƓ
ĂB

@X^CV[gg܂̂ŁARuFvAZ~RuGvԈ킸
ɓ͂ĂB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Script vs CSS</title>
<script type="text/javascript" src="images/banban.js"></script>
<style type="text/css">
<!--
div   { margin: 10px 50px; 
        color: #009; 
        font-weight: bold; 
        font-size: large }

h1    { color: #800080 }

table { margin-bottom: 1em }

td.cs { text-align: center }

img   { border-style: none }

p     { margin: 0px }

p a:link    { background-color: #063; 
              color: #fff; 
              font-weight: bold;
              font-size: 28px; 
              text-decoration: none; 
              padding: 5px 30px }

p a:visited { background-color: #063;
              color: #fff; 
              font-weight: bold; 
              font-size: 28px; 
              text-decoration: none; 
              padding: 5px 30px }

p a:hover   { background-color: #ff0; 
              color: #000; 
              font-weight: bold;
              font-size: 28px; 
              text-decoration: none; 
              padding: 5px 30px }
-->
</style>
</head>

<body onLoad="preloadImages();">
<div>
<h1>JavaScript vs CSS</h1>
JavaScript

<table cellspacing="0" cellpadding="0" summary="JavaScriptɂ郊N">
<tr><td><a href="#" 
onmouseover=
"changeImages('nav_final_01', 'images/nav_final_01-02.gif');return true;" 
onmouseout=
"changeImages('nav_final_01', 'images/nav_final_01.gif'); return true;" >
<img src="images/nav_final_01.gif" width="121" height="39" alt="Home" 
name="nav_final_01"></a></td>

<td><a href="#" 
onmouseover=
"changeImages('nav_final_02', 'images/nav_final_02-04.gif');return true;" 
onmouseout=
"changeImages('nav_final_02', 'images/nav_final_02.gif'); return true;" >
<img src="images/nav_final_02.gif" width="121" height="39" alt="ڎ" 
name="nav_final_02"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_03', 'images/nav_final_03-06.gif');return true;" 
onmouseout=
"changeImages('nav_final_03', 'images/nav_final_03.gif'); return true;" >
<img src="images/nav_final_03.gif" width="121" height="39" alt="Prev" 
name="nav_final_03"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_04', 'images/nav_final_04-08.gif');return true;" 
onmouseout=
"changeImages('nav_final_04', 'images/nav_final_04.gif'); return true;" >
<img src="images/nav_final_04.gif" width="121" height="39" alt="Next" 
name="nav_final_04"></a></td>

<td><a href="#" onmouseover=
"changeImages('nav_final_05', 'images/nav_final_05-10.gif');return true;" 
onmouseout=
"changeImages('nav_final_05', 'images/nav_final_05.gif'); return true;" >
<img src="images/nav_final_05.gif" width="121" height="39" alt="E-Mail" 
name="nav_final_05"></a></td></tr>
</table>

Cascading Style Sheet

<table cellspacing="0" cellpadding="0" summary="CSSɂ郊N">
<tr><td class="cs"><p><a href="#">Home</a></p></td>
    <td class="cs"><p><a href="#">Index</a></p></td>
    <td class="cs"><p><a href="#">Back</a></p></td>
    <td class="cs"><p><a href="#">Next</a></p></td>
    <td class="cs"><p><a href="#">Mail</a></p></td></tr>
</table>

<!-- eLXgŋLq郊N -->
<a href="#">Home</a> / <a href="#">Index</a> / <a href="#">Back</a> / 
 <a href="#">Next</a> / <a href="#">Mail</a>
</div>

</body>
</html>

@͌A^Cv~X_uR[e[V̕YȂǂȂmF
B

@͂I܂HTMLƂĕۑ܂B̂߂ɂ͕Kgq
ĕۑ܂Bł́Atest_27.html ƂĂ܂Bu.htmlvY
ɕۑĂB
@ȂAۑ̍ۂ́̕AȂCӂɖOĂĂx
܂B

@ۑłAuEUŊmFĂB
iOXNvg𐳂ǂݍ܂邱ƂłȂꍇ́AG[̃_C
OE{bNX\ꍇ܂Bj

  TvHTMLsURL
  http://www.scollabo.com/banban/magazine/sample/mmsample_033.html





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
@DTDi^`j̋LqŁAłHTML4.01Strict̗pĂ܂B
@HTML쐬ŁAǂ̃o[W̕@gp邩𖾎Iɐ錾
@΂Ȃ܂B
@@܂A錾o[W̕@gȂĂ͂Ȃ܂BႦ΁AL
@Strict^錾̂Ɋւ炸A񐄏̗vfEgƂ͋
@܂BǂĂ񐄏vfEgꍇɂ
@<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ƋLq
  Kv܂B

<script type="text/javascript" src="images/banban_01.js"></script>
@OXNvgǂݍ܂LqłBuimagesvtH_̒ɂXN
@vgubanban.jsvƂ JavaScriptw肵HTMLɓǂݍ݂܂B
@@͖{̋ނgpĂ܂B

@@܂ŃXNvg̋Lqɂ́A
@<script language="JavaScript"> ƋLqĂ܂AW3Cł͔񐄏
@ȂĂ܂BiHTML4/4.01̎dlj
@@傫ȗRƂāAJavaScriptAJavaScript1.1AJavaScript1.2AVBScript
@Ȃǂ̂悤Ȏʎq͕Ŵ̂ł͂ȂƂāAHTML4.01̎dlł͔񐄏
@ƂȂĂ܂B
@@ type="text/javascript" ƂLqŎ̓Ǝ̌؂ł́AقƂǂ̃u
@EUŁiMSIE3.0ȑOANetscape3.0ȑOājmF܂̂
@̂悤ȋLq@߂܂B{TCǵuJavaScriptvłׂ
@̋LqgpĂ܂B

<style type="text/css"> ` </style>
@X^CV[gwb_ɏޏꍇɂ͕KLq܂B܂AۂɃX
@^CV[gLqOɃRg^OA<!-- ƁARgAEg --> 
@L܂B́AX^CV[gɑΉĂȂuEUւ̈S
@ƂȂ܂B

div { margin: 10px 50px; color: #009; font-weight: bold; 
       font-size: large }
 divvf͒iȂǂɎgėpubNxvfłB̒ɂׂĂ
@Recz܂B
@㉺̗]10sNZAE̗]50sNZ݂A̒ŋLq
@eLXg largeTCYɂāAFZFɂ܂B

h1 { color: #800080 }
@Povf̕FFɂ܂B

table { margin-bottom: 1em }
@e[uŜ̉ɂP̗]ݒ肵܂B

td.cs { text-align: center }
@f[^Z̃NX cs ł̓eLXg̈ʒuZ̒ɔz
@B̑ZɓKp܂B

img { border-style: none }
@摜NƂ܂̂ŁANŗpg\Ƃ܂B
@̐ݒ肪ȂƁA摜ɕsӂȐFȂǂ̘g\܂B

p { margin: 0px }
@iɎgvfׂ̂Ă̗]\Ƃ܂B

p a:link { background-color: #063; color: #fff; font-weight: bold; 
           font-size: 28px; text-decoration: none; padding: 5px 30px }
  i p  a ̊Ԃ͔p̃Xy[XłBj
  vf̑֊֌WŐݒ肵X^CV[głB pvf avf̂
@ɓKp܂B avfɂ͐ݒ肳܂B
@@N̖KO̔wiFZΐFAF𔒐FŋA傫28s
@NZɐݒ肵܂B܂Aɂ͉\ɂA킹ăf[^
@̗]㉺ɂTsNZAE30sNZ܂B

p a:visited { background-color: #063; color: #fff; font-weight: bold; 
              font-size: 28px; text-decoration: none; padding: 5px 30px }
@Kς݂̃Nɐݒ肷̂ŁA͂vf̑֊֌WŔf܂B
@e͏LƂ܂łB

p a:hover { background-color: #ff0; color: #000; font-weight: bold; 
@@@@@@font-size: 28px; text-decoration: none; padding: 5px 30px }
@vf̑֊֌WŔfX^CV[głBNɃ}EXړ
@ɔwiFFAFFɕω̂ŁȂ͏LƂ܂
@łB

<body onLoad="preloadImages();">
@XNvgɋLڂĂ摜ׂ̂Ăǂݍ݂ɔ
@CxgnhbodyvfɋLq܂Bł͓ǂݍ݂
@Ă炷ׂẴRec\܂B

<table cellspacing="0" cellpadding="0" summary="JavaScriptɂ郊N">
@e[ũZ̗]ؔrLqłB summarýA{13
@ŉA񎋊onuEUւ̔zƂȂ܂B

<tr><td><a href="#" 
onmouseover=
"changeImages('nav_final_01', 'images/nav_final_01-02.gif');return true;" 
onmouseout=
"changeImages('nav_final_01', 'images/nav_final_01.gif'); return true;" >
<img src="images/nav_final_01.gif" width="121" height="39" alt="Home" 
name="nav_final_01"></td>
@e[ũZɃCxgnh܂B}EX̉摜̏
@ʉ߂ɁAVȉ摜\XNvg\Ă܂B
@@ȂAN <a href="#"> Ƃ̂́ANy[Wݒ肵Ă
  ̂ŁAĂ̂悤ɕ\L܂Ãy[WɃNꍇ
@̃pXiURLjLqgpĂBł̓NbNĂǂ
@N܂B
@iA\肭Ȃ悤łAPsŋLqĂBj

<td class="cs"><p><a href="#">Home</a></p></td>
@f[^ZɁAX^CV[g̃NXAcsĂяoĂ܂B܂A
@N͗vf̑֊֌WŐݒ肵X^CV[gĂяoĂ܂Bʔ
@ƂɃX^CV[głL̃XNvgƓ悤ȕ\ɂȂ܂B



XNvgƃX^CV[g̑Δ

@LHTMLsĂ̒ʂAXNvgg킸AX^CV[g
łA悤ȕ\\ɂȂĂ܂B

@̗pXNvgł́AOXNvg 0.8KBAgp摜10ŁA
v3.99KBAvSKB]Ɣɏ̂𗘗p܂B
@ȂAX^CV[gł͂̔܂BɃXNvg
ȂĂȒPɓ悤ȕ\ɂȂ̂ȂAX^CV[g͂̕
ɍ₷̂łA[Ũ\[X𖳑ʂɂ邱Ƃ܂B

@܂A[ŮŃXNvgsłȂꍇłX^CV[g͈
SłAꃆ[UŃX^CV[gItɂĂN͕\܂
̂ŁA܂SłB

@XNvgŃN\@́Â悤ȗRőϊ댯łB
XNvgے肷킯ł͂܂񂪁ȀꍇɔāAeLXg
N𕹋L悤ɐS܂傤BXNvggp̃}i[łB

OXNvg̗pR

@̂悤ɊOɃXNvguHTMLɓǂݍ܂Rɂ͂Q
܂B

@܂PɁAXNvg̓͂ςȂ̂ŋނƂč̗pƂłBX
Nvg̓vOȂ̂ŁÃguĂ͑ςłB܂A^
Cv~XU₷̂XNvg̓ł܂B

@QɁAXNvgQƂĂΕƂ܂B̒ɂ́A
̋Ĺuv̕܂BuEUɂĂ͂̋L̕
fĕ\Ă܂댯܂B܂sLu<vu>vȂǂ
^OɎgp̂ł킯ŁA댯łB

@́ijXHTMLł́AX^CV[gAXNvg͊OɒuƂ
܂Ă܂B
@ȂAJavaScriptɂẮA҂\肵Ă܂B



⑫EEOXNvg͈ȉ̂悤ȋLqɂȂĂ܂BړI͗pӂ
Ă摜炩ߓǂݍނ̂łB

function newImage(arg) {
  if (document.images) {
    rslt=new Image();
    rslt.src=arg;
    return rslt;
  }
}

function changeImages() {
  if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src=changeImages.arguments[i+1];
    }
  }
}

var preloadFlag=false;
function preloadImages() {
  if (document.images) {
    nav_final_01002=newImage("images/nav_final_01-02.gif");
    nav_final_02004=newImage("images/nav_final_02-04.gif");
    nav_final_03006=newImage("images/nav_final_03-06.gif");
    nav_final_04008=newImage("images/nav_final_04-08.gif");
    nav_final_05010=newImage("images/nav_final_05-10.gif");
    preloadFlag=true;
   }
}

@̃XNvgɂ́ARg^OA<!--  //--> ͂܂BHTML
ŋLqꍇɂ͕KvɂȂ܂BȂÃXNvgRɉĎg
pĂ肠܂BA摜͂ōĂB
@̃XNvǵAÂuEUiMSIE3.0ȑOANetscape3.0ȑOjł̓
͕ۏႵĂ܂B

@XNvgɊւĂ̏ڂ͏S҂ɂ͓̂ŁA24n܂
uJavaScriptuvi߂钆ŉ܂B
@ł̓XNvgƃX^CV[g̑ΔĂ炤߂ɁAĂ
XNvggp܂B


͂܂ŁAł͂ł́EE
T̂炢͂vy[Wɂfڂ܂̂ŁA񌩂ĂĂB
vy[WHTML̎sʂ̃TvA蕪₷
܂B킹ĉߋ̋L̂炢fڂĂ܂B

iT̂炢j
http://www.scollabo.com/banban/magazine/backnm_023.html

́AJavaScriptƂĂ̍un߂Ă܂BȂAJavaScriptu
ɊւĂ͕šfڂƂȂ܂̂ŁAB



Eӌ͂͂܂Ł@banban@scollabo.com
ȂA̍ۂɂ́AgOSAʏgĂuEUAgĂeL
XgGfB^ȂǁAȂׂ₷𖾋LĂƉ
₷ȂƎv܂B
@A̒Ԃ͉Ћ΂߂Ȃ̂ŁAԎx邱Ƃ܂B
B

sҁ@΂΂
@́@XYLER{[V@http://www.scollabo.com/
zMGW@܂܂@http://www.mag2.com/  iID@0000090196j

뎚EEEϊ~XE\RȂǂɂ͕ɂe͊肢܂BȂA}KW
ׂ̂Ă̋LqɌdȃXy~XꍇABƔlƋɎ܂
˂ĂƍKɎv܂B

obNio[@ŌJĂ܂B
v[eLXg  http://www.scollabo.com/banban/magazine/magazine.html
ê炢@@http://www.scollabo.com/banban/magazine/
A[JCu@@@@http://www.scollabo.com/banban/daf/archive.html
uށ@@@@@http://www.scollabo.com/banban/daf/material.html
܂܂̉ߋL@http://backno.mag2.com/reader/Back?id=0000090196

zM̕ύXE~͂łB
ʂ̎葱͎󂯕tĂ܂̂ŁAʓ|łeł肢łΏ
܂B
TCgɂā@http://www.scollabo.com/banban/magazine/top.html
܂܂ɂā@http://www.mag2.com/m/0000090196.htm



ł`E[ށ

@MR[q[܂G߂ɂȂ܂BɂƂăR[q[ Web쐬⌴
eĂƂɁAȂĂ͂ȂȂ݂Ȃ̂ŁA݂
܂X܂B܂AR[q[ނƂ̃^oR܂܂I
z߂Ă܂܂B

@ŋ߂̑̒̈́AȂƂ֌WĂ̂ȂƏȁB
Ȃ킯ŁAł̂ɂƂ悤ƁA]Ԓʋ΂n߂܂Bŏ̓
́AЂǂ܂AĂƑuȋCɂȂĂ܂Bς
lԁANԂłˁB



쌠ɂ
l̂obɕۑėpȊŐL̓]ځAp͊{Iɉ
Ă܂BL̓eɂāAfŎgp邱Ƃłւ܂B
@ȂAL̃X^CV[gAHTMLAXNvg̃y[W쐬Ɏ
RɎgĂĂx܂B

    @@Copyright(C) 2002  www.scollabo.com/banban/
